<h2>Why is this an issue?</h2>
<p>In CSS, when selectors are duplicated, the browser applies them in cascade. This means that if two selectors are identical, the second one takes
precedence. However, if the declarations within the selectors are not conflicting, they will be combined.</p>
<p>This behavior can lead to unexpected results and make debugging more difficult, especially in larger stylesheets. Therefore, it’s generally
recommended to avoid duplicating selectors.</p>
<p>The rule detects the following kinds of duplications:</p>
<ul>
  <li> within a list of selectors in a single rule set, </li>
  <li> for duplicated selectors in different rule sets within a single stylesheet. </li>
</ul>
<h2>How to fix it</h2>
<p>To fix your code, either remove the duplicated selector or merge all declarations.</p>
<h3>Code examples</h3>
<h4>Noncompliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
p {
  color: blue;
  font-size: 16px;
}

p { /* Noncompliant: duplicated selector 'p', overwrites property 'color' */
  color: red;
}
</pre>
<h4>Compliant solution</h4>
<pre data-diff-id="1" data-diff-type="compliant">
p {
  color: red;
  font-size: 16px;
}
</pre>
<h2>Resources</h2>
<h3>Documentation</h3>
<ul>
  <li> MDN - <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> </li>
  <li> MDN - <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade, specificity, and
  inheritance</a> </li>
</ul>
